<template>
  <div id="main">
    <div id="" class="card">
      <div style="width: 100%; height: 50px ">
        <!--查询条件-->
        <el-form :inline="true" :model="queryVo" class="demo-form-inline center" style="inline-height:50px; text-align: center; margin: auto">
          <el-form-item label="出库单编号:">
            <el-input v-model="queryVo.outId" placeholder="请输入名称"></el-input>
          </el-form-item>
          <el-form-item label="审核进度:">
            <el-select clearable v-model="queryVo.checkTag">
              <el-option
                  v-for="item in option"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-tiem>
            <el-button type="primary" icon="el-icon-search"  @click="query" >搜索</el-button>
          </el-form-tiem>
        </el-form>
      </div>
      <!--数据表格-->
      <el-table
          :data="storage"
          style="width: 100%">
        <el-table-column
            prop="outId"
            label="出库单编号"
            width="180">
        </el-table-column>
        <el-table-column
            prop="reason"
            label="入库理由"
            width="180">
        </el-table-column>
        <el-table-column
            prop="total"
            label="出库总数(件)"
            width="180">
        </el-table-column>
        <el-table-column
            prop="storage"
            label="登记人"
            width="180">
        </el-table-column>
        <el-table-column
            prop="registerTime"
            label="登记时间"
            width="230">
        </el-table-column>
        <el-table-column
            prop="checkTag"
            label="审核进度"
            width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.checkTag=='S001-1'">等待审核</span>
            <span v-else-if="scope.row.checkTag=='S001-3'" style="color: #F56C6C">驳回申请</span>
            <span v-else-if="scope.row.checkTag=='S001-2'" style="color: #67C23A">审核通过</span>
          </template>
        </el-table-column>
        <el-table-column
            prop="0"
            label="操作"
            width="180">
          <template slot-scope="scope">
            <span v-if="scope.row.checkTag=='S001-1'">
              <el-button type="text" @click="auditOut(scope.row.id)">审核</el-button>
            </span>
            <span v-else-if="scope.row.checkTag!='S001-1'"></span>
          </template>
        </el-table-column>
      </el-table>
      <!--分页插件-->
      <div id="cell" class="page">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[2, 5, 10, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import router from "@/router";

export default {
  name: "OutAudit",
  data(){
    return {
      //采购单
      storage:[],
      // 查询条件
      queryVo: {
        outId: '',
        checkTag:'',
      },
      option:[
        {
          value:'S001-1',
          label:'等待审核'
        },
        {
          value:'S001-2',
          label:'审核通过'
        },
        {
          value:'S001-3',
          label:'驳回申请'
        }
      ],
      //每页行数
      pageSize: 5,
      //总页数
      total: 0,
      // 当前页
      currentPage: 1,
    }
  },
  created() {
    this.query()
  },methods:{
    handleSizeChange(val) {
      this.pageSize = val
      this.query()
    },
    handleCurrentChange(val) {
      this.currentPage = val
      this.query()
    },
    //查询
    async query(){
      console.log(this.queryVo)
      const {data: res} = await this.$http.post
      (`/outGather/queryAll/${this.currentPage}/${this.pageSize}`, this.queryVo)
      this.storage = res.list
      this.total = res.total
    },
    //出库单审核
    async auditOut(id){
      sessionStorage.setItem("OutStock",id)
      this.$router.push("/outAuditDetail")
    }
  }
}
</script>

<style scoped>
.card {
  box-sizing: border-box;
  padding: 20px;
  overflow-x: hidden;
  background-color: #ffffff;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 0 12px #0000000d
}
.page{
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}
.el-icon svg {
  height: 1em;
  width: 1em;
}
.el-drawer .el-drawer__header span {
  font-size: 17px;
  line-height: 17px;
  color: black !important;
}
.el-drawer .el-drawer__header {
  padding: 16px 20px;
  margin-bottom: 0;
  border-bottom: 1px solid #ebeef5;
}
</style>